<script>
import Bmob from "hydrogen-js-sdk";
export default {
  data () {
    return {
      dataList: [] // 存储从数据库获取的数据
    };
  },
  mounted () {
    this.getList();
    const sessionToken = localStorage.getItem('sessionToken');
    if (sessionToken) {
      // 如果sessionToken存在，则用户已登录，可以执行相应的操作
      console.log('用户已登录，sessionToken:', sessionToken);
    } else {
      // 如果sessionToken不存在，则用户尚未登录，可能需要执行重定向等操作
      console.log('用户未登录');
    }
  },

  methods: {
    getList () {
      const arr = Bmob.Query("found")
      arr.find().then(res => {
        // console.log(res);
        this.dataList = res;
        // console.log(this.dataList);
      });

    },
  }
}

</script>
<template>
  <el-menu
    mode="horizontal"
    :default-active="selectedIndex"
    @select="selected"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    style="height: 50px; width: 100%;"
  >
    <el-menu-item index="1"><router-link
        to="/"
        class="custom-link"
      >寻物</router-link></el-menu-item>
    <el-menu-item index="2"><router-link
        to="/lost"
        class="custom-link"
      >找物</router-link></el-menu-item>
    <el-menu-item index="3"><router-link
        to="/AddInfo"
        class="custom-link"
      >添加失物招领</router-link></el-menu-item>
    <el-menu-item index="4"><router-link
        to="/AddLost"
        class="custom-link"
      >添加寻物启事</router-link></el-menu-item>
  </el-menu>
  <div style="position: fixed; top: 0; right: 0; margin: 20px;">
    <router-link
      to="/login"
      class="custom-link"
    >
      <el-button
        color="#626aef"
        :dark="isDark"
        v-if="sessionToken!==null"
      >个人中心</el-button>
      <el-button
        color="#626aef"
        :dark="isDark"
        v-else
      >登录</el-button>
    </router-link>
  </div>

  <h1>寻物</h1>
  <div class="list">
    {{objectId}}
  </div>
  <div class="card-container">
    <el-card
      v-for="item in dataList" :key="item.objectId" style="max-width: 430px" class="custom-card" shadow="hover"
    >
      <router-link
        :to="'/foundinfo/'+ item.objectId"
        class="card-link"
      >
        <h4 class="card-title">
          {{item.title}}
        </h4>
        <img
          src="../assets/erji.png"
          style="width: 100%"
        />
      </router-link>
    </el-card>
  </div>
</template>
<style>
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.custom-card {
  width: 350px;
  transition: all 0.5s;
  border: 1px solid transparent;
  border-radius: 15px;
  box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.2);
  margin: 10px 0;
}
.custom-card .card-title {
  color: #333; /* 设置文字颜色 */
  text-decoration: none;
}
.custom-card:hover .card-title {
  color: #00aeff; /* 设置悬停时文字颜色 */
}
.el-card:hover {
  margin-top: -5px;
}
.card-link {
  text-decoration: none; /* 取消链接默认下划线 */
  color: inherit; /* 继承父元素的文字颜色 */
}
</style>
